<template>
  <div class="menu">
    <page-content
      :content-config="contentConfig"
      :contentConfigCom="contentConfigCom"
      @handler-edit-click="handlerEditClick"
      @handler-new-click="handlerNewClick"
    />
    <page-modal ref="pageModalRef" :modal-config="modalConfig" />
  </div>
</template>

<script setup lang="ts">
import pageContent from '@/components/page-content/page-content.vue'
import contentConfig from './config/contentConfig'

import pageModal from '@/components/page-modal/page-modal.vue'
import modalConfig from './config/modalConfig'

import usePageModal from '@/hooks/usePageModal'
import useMainStore from '@/store/modules/main'
import { storeToRefs } from 'pinia'
import { computed } from 'vue'
const { pageModalRef, handlerNewClick, handlerEditClick } = usePageModal()

const mainStore = useMainStore()
const { menuList } = storeToRefs(mainStore)

// 菜单的icon图标
const contentConfigCom = computed(() => {
  const iconArr: string[] = []
  for (const itemIcon of menuList.value) {
    iconArr.push(itemIcon.icon)
  }
  return iconArr
})
</script>

<style lang="less" scoped>
.menu {
  h2 {
    color: red;
  }
}
</style>
